import React, { Component } from 'react';
import { Loading } from '@teamix/ui';
import sha1 from 'sha1';
// import DiffSettingsBtn from './diffSettingsBtn';
import FileItem from './fileItem';
import intl from '../../../../../../../../../../locale';

export default class Changes extends Component {
  componentDidUpdate(prevProps) {
    const { file, side } = this.props.hash;
    const { diffs } = this.props;

    // 如果路由中要跳转的行号变化，则更新 jump_line_code 状态
    // ps. 跳转的逻辑在 diffWithComment.jsx 中控制，因为不知道diff组件啥时候渲染完
    if (this.props.hash.line && this.props.hash.line !== prevProps.hash.line) {
      this.props.updateJumpLineCode({
        file: this.props.hash.file,
        line: this.props.hash.line,
        side: this.props.hash.side,
      });
    }

    // 这种情况是切换文件，需要把文件头定位到最上面,多文件模式才有，单文件模式不需要
    // ps. 跳转的逻辑在 diffWithComment.jsx 中控制，因为不知道diff组件啥时候渲染完
    if (file !== prevProps.hash.file && this.props.forceCrFileViewType !== 'single') {
      // 重新请求数据
      const diff = diffs
        ? diffs.filter((item) => {
            if (side === 'left') {
              return file === sha1(item.old_path);
            }
            return file === sha1(item.new_path);
          })
        : [];
      // 多文件切换不请求
      console.log(diff);
      // diff[0] && this.props.getSingleDiff(diff[0]);
      this.props.updateJumpFile(file);
    }
  }

  render() {
    const {
      diffs,
      diffsSha1Map,
      hash,
      isCommitsAndDiffsLoading,
      forceCrFileViewType,
      totalCountInfo,
    } = this.props;

    if (!diffs.length) {
      if (!isCommitsAndDiffsLoading) {
        return intl.get({
          id: 'code-assets.containers.file.NoChangesHaveBeenMade',
          defaultMessage: '当前评审没有任何改动',
        });
      } else {
        return (
          <div className="diff-loading">
            <Loading visible style={{ height: '100px' }} />
          </div>
        );
      }
    }

    const activeDiff =
      diffs.filter((diff) => diffsSha1Map[hash.file] === diff.new_path)[0] || diffs[0];

    const isFileTooMany = totalCountInfo.curFileCount > totalCountInfo.maxFileCount;
    const isLineTooMany = totalCountInfo.curLineCount > totalCountInfo.maxLineCount;

    return (
      <div>
        <div className="file-panel-list" id="J_file_List">
          {forceCrFileViewType === 'single' ? (
            <FileItem diff={activeDiff} {...this.props} />
          ) : (
            <div>
              {isFileTooMany || isLineTooMany ? (
                <div className="choose-sigle-mode-tip">
                  {isLineTooMany
                    ? intl.get({
                        id: 'code-assets.containers.file.TheNumberOfModifiedRows',
                        defaultMessage: '改动行数过多，请切换至逐个浏览模式',
                      })
                    : intl.get({
                        id: 'code-assets.containers.file.ThereAreTooManyModified',
                        defaultMessage: '改动文件数过多，请切换至逐个浏览模式',
                      })}
                </div>
              ) : (
                diffs.map((item) => <FileItem diff={item} {...this.props} />)
              )}
            </div>
          )}
        </div>
      </div>
    );
  }
}
